<script>
import Taro from "@tarojs/taro";
import { reactive } from "vue";
import { useTzRouter } from "@/vhooks/useTzRouter";
import { getNoBundRocars } from "./api";
import { letgetDay } from "@/utils/date";
import TzVue, { useReachBottom, usePullDownRefresh } from "@/lib/TzVue";
import { useQueryForm } from "./useQueryForm";
import { useTabHeader } from "./useTabHeader";
import { useQueryData } from "./useQueryData";

export default new TzVue({
  name: "SelectGoods",
  setup() {
    const { route, navigateBack } = useTzRouter();

    //下拉刷新
    usePullDownRefresh(() => {
      const { activedTabName } = state;
      if (activedTabName !== "other") {
        const params = {
          beginTime: letgetDay(-activedTabName),
          currentPage: 1,
          endTime: letgetDay(0),
        };
        queryBundRocarsData(params)
          .then(() => {
            Taro.stopPullDownRefresh();
          })
          .catch(() => {
            Taro.stopPullDownRefresh();
          });
      }
    });

    useReachBottom(() => {
      const { activedTabName } = state;
      if (activedTabName !== "other") {
        const params = {
          beginTime: letgetDay(-activedTabName),
          currentPage: state.currentPage++,
          endTime: letgetDay(0),
        };
        queryBundRocarsData(params, true);
      }
    });

    const state = reactive({
      activedTabName: "7",
      currentPage: 1,
      dataList: [],
      ccrn: "", //搜索条件，ccrn号
      navigateGoodsArr: [], //上个页面的货物数据
    });

    //页面参数
    if (route.query.goodsArr) {
      state.navigateGoodsArr = JSON.parse(route.query.goodsArr);
    }

    // 查询确报数据
    const queryBundRocarsData = (params, isAppend) => {
      return new Promise((resolve, reject) => {
        getNoBundRocars(params)
          .then((res) => {
            const { recordList, pageCount } = res.data;
            //上个页面存在相同货物 则是选中状态
            recordList.forEach((item) => {
              item.isCheck = state.navigateGoodsArr.includes(item.id);
            });
            if (isAppend) {
              if (state.currentPage > pageCount) {
                Taro.showToast({
                  title: "已全部加载完成",
                  icon: "none",
                  duration: 1000,
                });
                return;
              }
              state.dataList.push(...recordList);
            } else {
              state.dataList = recordList;
            }
            resolve();
          })
          .catch((err) => {
            reject(err);
          });
      });
    };

    // 首次加载确报列表
    queryBundRocarsData({
      beginTime: letgetDay(-7),
      currentPage: 1,
      endTime: letgetDay(0),
    });

    const tabHeaderHook = useTabHeader(state, queryBundRocarsData, letgetDay);
    const queryFormHook = useQueryForm(state, queryBundRocarsData);
    const queryDataHook = useQueryData(state);
    const saveClick = () => {
      const checkedList = state.dataList.filter((item) => {
        return item.isCheck;
      });
      navigateBack({
        delta: 1,
        event: {
          type: "goodsBack", //事件类型 ，可以自己任意定义
          data: checkedList, //回退的数据
        },
      });
    };
    return () => {
      return (
        <tz-view class="goods-home">
          <tz-button class="save-btn" type="primary" onClick={saveClick}>
            保存
          </tz-button>
          <tz-view class="tabs">
            {tabHeaderHook()}
            <tz-view class="tabs__content">
              {state.activedTabName === "other"
                ? queryFormHook()
                : queryDataHook()}
            </tz-view>
          </tz-view>
        </tz-view>
      );
    };
  },
});
</script>

<style lang="scss">
.goods-home {
  display: flex;
  align-items: center;
  flex-direction: column;
  .save-btn {
    width: 90%;
    margin: 10px 0;
  }
  .tabs {
    width: 100%;
    .tabs__header {
      display: flex;
      .tab__pane {
        flex-grow: 1;
        @extend %border1;
        height: 50px;
        line-height: 50px;
        text-align: center;
      }
      .actived {
        color: $primary-color;
        border-bottom: 3px solid $primary-color;
      }
    }
    .tabs__content {
      padding: 10px 0;
      .query-block {
        display: flex;
        flex-direction: column;
        .query-form {
          background-color: $white;
          padding: 0 14px;
          .tz-cell {
            &:last-child:after {
              border: none;
            }
            picker {
              .placeholder {
                color: $placeholder-color;
              }
            }
            .tz-icon-scan {
              font-size: 24px;
              color: $info-color-active;
            }
          }
        }
        .search-btn {
          align-self: center;
          width: 345px;
          margin-top: 20px;
          height: 44px;
        }
      }
    }
  }
  .data-list {
    .data-list-item {
      display: flex;
      justify-content: space-around;
      padding: 10px 0;
      &:nth-child(odd) {
        background-color: $help-color;
      }
      .info-area {
        width: 60%;
        .tz-cell {
          font-size: 12px;
          line-height: 20px;
          margin-left: 25px;
          .tz-cell-label {
            width: auto;
            padding-right: 16px;
            color: $title-color3;
          }
        }
      }
      .operation-area {
        width: 20%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        .status-name {
          font-size: 18px;
          &.gray {
            color: $info-color;
          }
          &.green {
            color: $success-color-end;
          }
          &.orange {
            color: $warning-color;
          }
          &.red {
            color: $danger-color;
          }
        }
        .handle-btn-content {
          flex: 1;
          display: flex;
          align-items: center;
          font-size: 16px;
          color: $primary-color-active;
          .close-btn {
            display: flex;
            align-items: center;
            flex-direction: column;
            color: $danger-color;
          }
        }
      }
    }
  }
}
</style>
